<script setup lang="ts">
import type { FormDesignerComponents } from "../FormComponentMixin";
import CommonConfig from "./CommonConfig.vue";
const config = defineModel<FormDesignerComponents>("config");
const propsCollapse = ref("0");
</script>

<template>
  <el-collapse v-model="propsCollapse" accordion>
    <el-collapse-item name="0">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><List /></el-icon>
          <div>基本属性</div>
        </div>
      </template>
      <CommonConfig v-model:config="config" />
      <el-form-item label="图标设置">
        <el-radio-group v-model="config.props.icon" size="small">
          <el-radio-button value="StarFilled">
            <el-icon><StarFilled /></el-icon>
          </el-radio-button>
          <el-radio-button value="View">
            <el-icon><View /></el-icon>
          </el-radio-button>
          <el-radio-button value="UserFilled">
            <el-icon><UserFilled /></el-icon>
          </el-radio-button>
          <el-radio-button value="Medal">
            <el-icon><Medal /></el-icon>
          </el-radio-button>
          <el-radio-button value="Sunny">
            <el-icon><Sunny /></el-icon>
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="最大分值">
        <el-input-number
          v-model="config.props.max"
          :precision="0"
          :min="0"
          :max="20"
        />
      </el-form-item>
      <el-form-item label="显示分值">
        <el-switch v-model="config.props.showScore" />
      </el-form-item>
      <el-form-item label="允许半分">
        <el-switch v-model="config.props.enableHalf" />
      </el-form-item>
      <el-form-item label="图标颜色">
        <el-color-picker v-model="config.props.color" />
      </el-form-item>
      <el-form-item label="隐藏名称">
        <el-switch v-model="config.props.hideLabel" />
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="config.props.required" />
      </el-form-item>
    </el-collapse-item>
  </el-collapse>
</template>

<style lang="scss" scoped>
.collapse-title {
  padding: 0px 5px;
  display: flex;
  align-items: center;

  & > div {
    margin-left: 10px;
  }
}
</style>
